<template>
  <div>
    <Header1></Header1>
    <div class="main">
      <Leftmenu></Leftmenu>
      <router-view class="content" v-loading="showLoading"></router-view>
    </div>

    <AddDia v-if="$store.state.dia.add.show"></AddDia>
    <ConfirmDia v-if="$store.state.dia.confirm.show"></ConfirmDia>
  </div>
</template>
<script>
  import http from '../assets/js/http'
  import Header1 from './common/header1.vue'
  import Leftmenu from './common/leftmenu.vue'
  import AddDia from "./common/dia/add.vue"
  import ConfirmDia from "./common/dia/confirm.vue"


  export default {
    components: {
      Header1,
      Leftmenu,
      AddDia,
      ConfirmDia,
    },
    mixins: [http]
  }
</script>
<style >
  .main{
    display: flex;
    justify-content: space-between;
    height: calc(100% - 60px);
    overflow: hidden;
  }
  .content{
    flex: auto;
    padding: 20px;
    background: #f1f2f7;
    overflow: auto;
    /* min-width: 1000px; */
    /* height: calc(100% - 20px); */
    box-sizing: border-box;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .3s
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0
  }
</style>
